
// Table Cell Styles
.logs-viewer--cell {
    font-size: 12px;
    padding: 0 4px;
    color: $g11-sidewalk;
    display: flex;
    align-content: center;
    align-items: center;
    font-family: $code-font;
  
    &.highlight {
      color: $g20-white;
    }
  
    &.message-wrap {
      word-break: break-all
    }
  }
  .logs-viewer--cell-header {
    font-weight: 600;
    color: $g15-platinum;
    border-bottom: 2px solid $g5-pepper;
  }


// Table Dots
.logs-viewer--dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    background-color: $g0-obsidian;
    border: 2px solid $g3-castle;
    margin-left: 2px;
  }
  .logs-viewer--severity-text {
    padding: 2px;
    padding-left: 5px;
  }
  
  // Play & Pause Toggle in Header
  .logs-viewer--mode-toggle {
    margin-right: 10px;
  }

  // Table Clickable Cells
.logs-viewer--clickable {
    display: inline-flex;
    align-items: center;
    padding: 0px 3px;
    border-radius: 3px;
    @include no-user-select();
  
    &:hover {
      background-color: $c-pool;
      color: $g20-white;
      cursor: pointer;
    }
  
    &:active,
    &:active:hover {
      background-color: $c-laser;
    }
  }

// Table Scroll Loader
.logs-viewer--scroll-loader {
    position: fixed;
    bottom: 0;
    left: 60px;
    width: calc(100% - 60px);
    height: 60px;
    @include gradient-v(rgba($g2-kevlar, 0), $g2-kevlar);
    z-index: 5;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: opacity 0.25s ease;
    opacity: 0;
    color: $g15-platinum;
  
    &.loading {
      opacity: 1;
    }
  
    h6 {
      margin: 0;
    }
  }
  
  .logs-viewer--table-count {
    position: absolute;
    top: -60px;
  }
  